<template>
	<view>
		
		<u-tabs :list="tabs" :is-scroll="false" :current="tabIndex" @change="tabChange" active-color="#FF7104" style="width:100vw;position: fixed;top: 80rpx;z-index: 9;height: 80rpx;box-shadow: 0 2rpx 20rpx rgba(0,0,0,0.5);"></u-tabs>
		
		<view style="padding-bottom: 100rpx;" v-if="curTableVal == 'client_order' || curTableVal == 'my_order'">
			<view v-if="dataList.length">
				<u-collapse :item-style="{backgroundColor: '#fff',margin:'2rpx 0',padding:'0 10rpx'}" style="background-color: #cccccc;margin-top: 80rpx;">
					<u-collapse-item  v-for="(item, index) in dataList" :key="index">
						<view slot="title">
							<view style="width: 100%;background-color: #fff;">
								<view style="display: flex;justify-content: space-between;align-items: center;font-size: 9pt;">
									<view>{{item.order_no}}</view>
									<view>
										<text v-if="item.refund_id > 0">
											<text v-if="item.is_refund > 0">已退款</text>
											<text v-else>售后处理中</text>
										</text>
										<text v-else>
											<text v-if="item.status == 1">待发货</text>
											<text v-if="item.status == 0">待支付</text>
											<text v-if="item.status == 2">待收货</text>
											<text v-if="item.status == 3">已收货</text>
											<text v-if="item.status == 5">已取消</text>
											<text v-if="item.status == 8">已完成</text>
										</text>
									</view>
								</view>
								<block v-for="(itm,idx) in item.order_goods" :key="idx">
									<view style="display: flex;margin-top: 20rpx;">
										<image :src="itm.goods_info.goods_attr.cover_pic" lazy-load="true" style="width: 100rpx;height: 100rpx;flex:1"></image>
										<view style="flex: 5;padding-left: 20rpx;">
											<view class="goods-name">{{itm.goods_info.goods_attr.name}}{{itm.goods_info.goods_attr.name}}{{itm.goods_info.goods_attr.name}}{{itm.goods_info.goods_attr.name}}</view>
											<view class="goods-attr">{{itm.goods_info.attr_list[0].attr_name}}</view>
										</view>
										<view style="text-align: right;font-size: 9pt;color: #888888;line-height: 30rpx;padding-top: 20rpx;flex:1;">
											<view>¥{{itm.goods_info.goods_attr.original_price}}</view>
											<view>x{{itm.goods_info.goods_attr.number}}</view>
										</view>
									</view>
								</block>
								<view style="display: flex;justify-content: space-between;margin-top: 15rpx;align-items: center;font-size: 9pt;">
									<view>创建时间:{{formatTimeToStr(item.created_at * 1000)}}</view>
									<view>
										<text>收入：</text>
										<text v-if="item.status == 0 || item.status == 5 || curTableVal == 'my_order' || item.refund_id > 0 ">-</text>
										<text v-else style="font-weight: 600;color:red">￥{{item.income}}</text>
									</view>
								</view>
							</view>
						</view>
						<view>
							<view style="background-color: #fff;font-size: 9pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;">
								<view>创建人：</view>
								<image style="width: 50rpx;height: 50rpx;" lazy-load="true" v-if="item.user.avatar_url" :src="item.user.avatar_url"></image>
								<image style="width: 50rpx;height: 50rpx;" src="/static/icon/default-avatar.png" v-if="!item.user.avatar_url"></image>
								<view style="margin-left: 10rpx;">{{item.user.nickname}}</view>
								<view style="margin-left: 30rpx;">￥{{item.total_pay_price}}</view>
							</view>
							<view style="background-color: #fff;font-size: 9pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;">
								<view>进货人：</view>
								<image style="width: 50rpx;height: 50rpx;" lazy-load="true" v-if="item.sub_user.avatar_url" :src="item.sub_user.avatar_url"></image>
								<image style="width: 50rpx;height: 50rpx;" src="/static/icon/default-avatar.png" v-if="!item.sub_user.avatar_url"></image>
								<view style="margin-left: 10rpx;">{{item.sub_user.nickname}}</view>
								<view style="margin-left: 30rpx;">￥{{item.pay_price}}</view>
							</view>
							<view style="background-color: #fff;font-size: 9pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;">
								<view>供应商：</view>
								<image style="width: 50rpx;height: 50rpx;" lazy-load="true" v-if="item.sup_user.avatar_url" :src="item.sup_user.avatar_url"></image>
								<image style="width: 50rpx;height: 50rpx;" src="/static/icon/default-avatar.png" v-if="!item.sup_user.avatar_url"></image>
								<view style="margin-left: 10rpx;">{{item.sup_user.nickname}}</view>
							</view>
						</view>
						<!-- 客户订单展示内容 -->
						<view v-if="curTableVal == 'client_order'">
							<view style="background-color: #fff;font-size: 9pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;">
								<view>实收：</view>
								<view style="margin-left: 10rpx;">+￥{{item.pay_price}}</view>
							</view>
							
							<view style="background-color: #fff;font-size: 9pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;">
								<view>进货：</view>
								<view style="margin-left: 10rpx;">-￥{{item.sup_pay_price}}</view>
							</view>
							
							<view style="background-color: #fff;font-size: 9pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;">
								<view>手续费：</view>
								<view style="margin-left: 10rpx;">-￥{{(parseFloat(item.hand_fees) + parseFloat(item.express_price)).toFixed(2)}}</view>
							</view>
						</view>
						
						<!-- 我的订单展示内容 -->
						<view v-if="curTableVal == 'my_order'">
							
							<view style="background-color: #fff;font-size: 9pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;">
								<view>进货：</view>
								<view style="margin-left: 10rpx;">-￥{{item.pay_price}}</view>
							</view>
							
							<view style="background-color: #fff;font-size: 9pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;" v-if="item.sup_user_id <= 1">
								<view>手续费：</view>
								<view style="margin-left: 10rpx;">-￥{{item.express_price}}</view>
							</view>
							
							<view style="background-color: #fff;font-size: 9pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;" v-if="item.sup_user_id > 1">
								<view>手续费：</view>
								<view style="margin-left: 10rpx;">-￥0.00</view>
							</view>
							
							<view style="background-color: #fff;font-size: 11pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;" v-if="item.sup_user_id > 1">
								<view>支付：</view>
								<view style="margin-left: 10rpx;">￥{{ item.pay_price }}</view>
							</view>
							
							<view style="background-color: #fff;font-size: 11pt;padding: 0 20rpx;display: flex;align-items: center;padding-bottom: 20rpx;" v-if="item.sup_user_id <= 1">
								<view>支付：</view>
								<view style="margin-left: 10rpx;">￥{{ (parseFloat(item.pay_price) + parseFloat(item.express_price)).toFixed(2) }}</view>
							</view>	
						</view>
					</u-collapse-item>
				</u-collapse>
				<!--加载loadding-->
				<u-loadmore style="padding: 20rpx 0;" :status="loadingStatus" :load-text="loadText" @loadmore="clickLoadMoreHandler"/>
			</view>
			<view v-else style="margin-top: 500rpx;text-align: center;">
				无相关数据~
			</view>
			<!--加载loadding-->
		</view>

		<view style="padding-bottom: 100rpx;" v-if="curTableVal == 'index'">
			<u-collapse :item-style="{backgroundColor: '#fff',margin:'2rpx 0',padding:'20rpx 10rpx'}" style="background-color: #cccccc;margin-top: 80rpx;">
				<u-collapse-item>
					<view slot="title" style="display: flex;justify-content: space-between;width: 100%;">
						<view>总订单数</view>
						<view>{{statistics.order_num || 0}}</view>
					</view>
					<view>实际下单用户的订单数，不含下级向上级进货的订单数。</view>
				</u-collapse-item>
<!-- 				<u-collapse-item>
					<view slot="title" style="display: flex;justify-content: space-between;width: 100%;">
						<view>总订单金额</view>
						<view>{{statistics.order_total_price || 0}}</view>
					</view>
					<view>实际下单用户所支付的总订单金额</view>
				</u-collapse-item> -->
				<u-collapse-item>
					<view slot="title" style="display: flex;justify-content: space-between;width: 100%;">
						<view>总收入金额</view>
						<view>{{statistics.total_in_price || 0}}</view>
					</view>
					<view>下级向您进货的总金额</view>
				</u-collapse-item>
				<u-collapse-item>
					<view slot="title" style="display: flex;justify-content: space-between;width: 100%;">
						<view>总支出金额</view>
						<view>{{statistics.total_out_price || 0}}</view>
					</view>
					<view>您向上级进货的总金额</view>
				</u-collapse-item>
				<u-collapse-item>
					<view slot="title" style="display: flex;justify-content: space-between;width: 100%;">
						<view>总收益金额</view>
						<view>{{statistics.total_income || 0}}</view>
					</view>
					<view>总收益金额 = 下级向您进货的金额 - 您向上级进货的金额</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		
		<view @click="filterVisible = true" style="width: 100vw;padding: 20rpx;text-align: center;position: fixed;bottom: 0;z-index: 9;background-color: #FF7104;color:#fff;font-size: 12pt;font-weight: 600;">筛 选</view>
		
		<u-popup mode="bottom" v-model="filterVisible" border-radius="20" height="800rpx" @open="filterOpenHandler">
			<view class="filter-content">
				<view style="display: flex;justify-content: space-between;position: fixed;top:0;width: 100%;height: 100rpx;align-items: center;padding:0 20rpx;font-size: 12pt;">
					<view style="padding: 0 40rpx;" @click="filterVisible = false">取消</view>
					<view style="padding: 0 40rpx;color:#FF7104" @click="filterConfirm">确定</view>
				</view>
				<scroll-view scroll-y="true" style="height: 780rpx;padding-top: 100rpx;">
					<u-form :model="filterForm" ref="filterForm" style="padding: 0 20rpx;" label-position="top" rules="filterFormRules">
						<u-form-item label="下单时间">
							<u-input @click="datePickerVisible = true" placeholder="请选择时间范围" :value="filterForm.date.length == 2?filterForm.date[0]+'~'+filterForm.date[1] : ''" ></u-input>
						</u-form-item>
						<u-form-item label="下单用户手机号" prop="mobile">
							<u-input type="number" placeholder="请输入用户手机号码" v-model="filterForm.mobile"></u-input>
						</u-form-item>
						<u-form-item label="订单状态">
							<u-checkbox-group @change="checkboxGroupChange">
								<u-checkbox v-model="item.checked" v-for="(item, index) in orderStatusOptions" :key="index" :name="item.value">
									{{ item.name }}
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
					</u-form>
				</scroll-view>
			</view>
		</u-popup>
		
		
		<u-calendar v-model="datePickerVisible" mode="range" @change="dateChangeHandler"></u-calendar>
	</view>
	
	
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	
	export default {
		components: {},
		data() {
			return {
				tabs:[
					{name:'概况',value:'index'},
					{name:'客户订单',value:'client_order'},
					{name:'我的订单',value:'my_order'},
				],
				tabIndex:0,
				curTableVal:'index',
				loadingStatus:'loadmore',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				filterVisible:false,
				filterForm:{
					date:[],
					order_status:[0,1,2,3,5,8,-1],
					mobile:""
				},
				filterFormRules:{
					mobile:[
						{
							validator: (rule, value, callback) => {
								if(value){
									return this.$u.test.mobile(value);
								}
								return true;
							},message: '手机号码不正确',trigger: ['change','blur'],
						}
					]
				},
				datePickerVisible:false,
				orderStatusOptions:[
					{name:'待支付',value:0,checked:true},
					{name:'待发货',value:1,checked:true},
					{name:'待收货',value:2,checked:true},
					{name:'已收货',value:3,checked:true},
					{name:'已取消',value:5,checked:true},
					{name:'已完成',value:8,checked:true},
					{name:'退款|退款中',value:-1,checked:true}
				],
				
				statistics:{
					order_num:0,
					order_total_price:0,
					total_in_price:0,
					total_out_price:0,
					total_income:0
				},
				dataList: [],
				queryParams:{
					order_type: 1,
					page:1,
					page_size:10,
					total_count:0
				},
			}
		},
		onLoad(options) {
			let tabIndex = options.tab ?? 0;
			this.tabChange(tabIndex)
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value)
			}
		},
		methods: {
			
			//选项卡切换
			tabChange(index){
				this.tabIndex = index;
				this.curTableVal = this.tabs[index].value;
				if(this.curTableVal == 'index'){
					this.getStatistics();
				}else{
					this.resetParams();
					this.getDateList();
				}
			},
			
			//重置请求参数和响应数据
			resetParams(){
				this.dataList = [];
				this.queryParams.page = 1;
				this.queryParams.total_count = 0;
			},
			
			//获取订单数据
			async getDateList() {
				let self = this;
				uni.showLoading({
					title:"数据加载中..."
				})
				let res = await self.$http.request({
					url: self.$api.purchasing_system.getOrderSupplyChain,
					method: 'POST',
					data: {...self.queryParams,...self.filterForm}
				});
				uni.hideLoading()
				if(res.code !== 0){
					this.loadingStatus = 'nomore';
					return self.$http.toast(res.msg);
				}
				let {
					list,
					pagination
				} = res.data;
				self.dataList.push(...list);
				self.queryParams.page = pagination.current_page;
				self.queryParams.total_count = pagination.total_count;
				this.loadingStatus = 'loadmore';
			},
			
			async getStatistics(){
				let self = this;
				uni.showLoading({
					title:"数据加载中..."
				})
				let res = await self.$http.request({
					url: self.$api.purchasing_system.orderStatistics,
					method: 'POST',
					data: {...self.filterForm}
				});
				uni.hideLoading()
				if(res.code !== 0){
					return self.$http.toast(res.msg);
				}
				this.statistics = res.data;
				// Object.assign(this.statistics,res.data)
				
				// console.log(123123,res)
			},
			
			//触底或手动点击加载更多的处理方法
			clickLoadMoreHandler(){
				if(this.curTableVal !=='index' && this.loadingStatus == 'loadmore'){
					let pageNum = Math.ceil( this.queryParams.total_count / this.queryParams.page_size );
					if( this.queryParams.page < pageNum ){
						this.loadingStatus = 'loading';
						setTimeout(() => {
							this.queryParams.page++;
							this.getDateList();
						},1000)
					}else{
						this.loadingStatus = 'nomore'
					}
				}
			},
			
			
			//筛选弹框确定后的处理
			filterConfirm(){
				this.filterVisible =false;
				this.tabChange(this.tabIndex);
			},
			
			//多选框change事件处理
			checkboxGroupChange(e){
				this.filterForm.order_status = e;
			},
			
			//时间选择change时间处理
			dateChangeHandler(e){
				this.filterForm.date = [e.startDate,e.endDate];
			},
			
			//筛选弹窗打开时，注册表单验证器
			filterOpenHandler(){
				this.$refs.filterForm.setRules(this.filterFormRules);
			}
		
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.resetParams();
				this.getDateList();
			}, 1000);
		},
		onReachBottom() {
			this.clickLoadMoreHandler();
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
	}

	.goods-name {
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		font-size: 9pt;
		line-height: 32rpx;
	}
	.goods-attr {
		font-size: 9pt;
		color: #888888;
		line-height: 32rpx;
		padding-top: 10rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	
	
	
	
	.filter-content{
		text-align: center;
		position: relative;
	}
	
	
	/deep/ ::-webkit-scrollbar {
		 //滚动条整体样式
		    display: block;
		    width: 10px !important;
		    height: 10px !important;
		    -webkit-appearance: auto!important;
		    background: #f2f2f2;
		    overflow: auto!important;
	}
	/deep/ ::-webkit-scrollbar-thumb {
		 //滚动条里面小方块
		   border-radius: 10px !important;
		   box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;
		   background-color: #535353 !important;
	}
	/deep/ ::-webkit-scrollbar-track {
		   //滚动条
		   border-radius: 10px !important;
		   box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;
		   background-color: #ededed !important;
	}
	
	
</style>
